<template>
  <div class="app-container">
    <el-row>
      <!-- 搜索区域 -->
      <el-card style="margin:0 0 5px 5px;" v-show="showSearch">
        <el-form ref="queryForm" :inline="true" :model="queryData">
          <el-form-item label="所属分类" prop="catalogPath">
            <el-cascader
              v-model="catalogPath"
              filterable
              clearable
              placeholder="试试搜索：手机"
              :options="categoryData"
              :props="categoryProps"
              @change="handleChangeCatalog"
            />
          </el-form-item>
          <el-form-item label="选择品牌" prop="Q_brandId_L_EQ">
            <el-select placeholder="请选择" v-model="queryData.Q_brandId_L_EQ" filterable clearable>
              <el-option
                v-for="item in brandData"
                :key="item.brandId"
                :label="item.name"
                :value="item.brandId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键词" prop="Q_key_S_LK">
            <el-input style="width:160px" v-model="queryData.Q_key_S_LK" />
          </el-form-item>
          <el-form-item label="价格">
            <el-input-number style="width:160px" v-model="queryData.Q_price_L_GE" :min="0" />-
            <el-input-number style="width:160px" v-model="queryData.Q_price_L_LE" :min="0" />
          </el-form-item>
          <el-form-item class="fr p-r-10">
            <el-button class="filter-item" type="primary" round icon="el-icon-search" @click="handleFilter">
              搜索
            </el-button>
            <el-button class="filter-item m-l-10" type="info" round icon="el-icon-refresh" @click="handleClear">
              清空
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- table区域 -->
      <el-card class="m-l-5">
        <el-row :gutter="10" class="m-b-5">
          <table-toolbar :showSearch.sync="showSearch" @refresh="getTableData" />
        </el-row>
        <el-table
          ref="sku_table"
          v-loading="tableLoading"
          row-key="skuId"
          :data="tableData"
          element-loading-text="加载中"
          border
          fit
          highlight-current-row
          show-overflow-tooltip
          height="100px"
          v-el-height-adaptive-table="{bottomOffset: 110}"
          @sort-change="sortChange"
        >
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-form :model="scope.row">
                <el-row style="line-height: 24px!important;">
                  <el-col :span="3" :offset="1">
                    <label>商品标题</label>
                  </el-col>
                  <el-col :span="20">
                    <el-tag class="m-b-5" type="success" v-text="scope.row.skuTitle" />
                  </el-col>
                </el-row>
                <el-row style="line-height: 24px!important;">
                  <el-col :span="3" :offset="1">
                    <label>商品副标题</label>
                  </el-col>
                  <el-col :span="20">
                    <el-tag v-if="scope.row.skuSubtitle" class="m-b-5" type="info" v-text="scope.row.skuSubtitle" />
                  </el-col>
                </el-row>
                <el-row style="line-height: 24px!important;">
                  <el-col :span="3" :offset="1">
                    <label>商品描述</label>
                  </el-col>
                  <el-col :span="20">
                    <el-tag v-if="scope.row.skuDesc" class="m-b-5" type="info" v-text="scope.row.skuDesc" />
                  </el-col>
                </el-row>
                <el-row style="line-height: 24px!important;">
                  <el-col :span="1.5" :offset="1">
                    <label class="m-r-20">品牌</label>
                  </el-col>
                  <el-col :span="1.5">
                    <el-tag class="m-b-5" type="primary" v-text="scope.row.brandName" />
                  </el-col>
                  <el-col :span="1.5" :offset="1">
                    <label class="m-l-20 m-r-20">分类</label>
                  </el-col>
                  <el-col :span="1.5">
                    <el-tag class="m-b-5" type="primary" v-text="scope.row.catalogName" />
                  </el-col>
                </el-row>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column align="center" label="名称" prop="skuName" show-overflow-tooltip />
          <el-table-column align="left" label="默认图片" width="90">
            <template slot-scope="scope">
              <el-popover placement="left" :width="300" trigger="hover">
                <img fit="scale-down" height="200px" width="100%" :src="getImageSrc(scope.row.skuDefaultImg)" />
                <template #reference>
                  <el-avatar shape="square" fit="fill" :src="getImageSrc(scope.row.skuDefaultImg)" />
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center" label="价格" prop="price" sortable width="110" show-overflow-tooltip />
          <el-table-column align="center" label="销量" prop="saleCount" sortable width="110" show-overflow-tooltip />
          <el-table-column align="center" label="操作" width="160" fixed="right">
            <template slot-scope="scope">
              <el-link v-permission="['mall:product:edit']" class="m-r-5" type="primary" icon="el-icon-view" @click="handlePreview(scope.row)">预览</el-link>
              <el-dropdown>
                <span class="el-dropdown-link" style="font-size: smaller">
                  <i class="el-icon-d-arrow-right el-icon--right" />更多
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-permission="['mall:product:edit']">
                    <el-link icon="el-icon-upload2" @click="handleUpload(scope.row)">图片管理</el-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-permission="['mall:product:edit']">
                    <el-link type="primary" icon="el-icon-plus" @click="handlePrice(scope.row)">设置价格</el-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-permission="['mall:product:edit']">
                    <el-link type="success" icon="el-icon-plus" @click="handleBounds(scope.row)">设置积分</el-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-permission="['mall:product:edit']">
                    <el-link type="danger" icon="el-icon-plus" @click="handleStock(scope.row)">库存管理</el-link>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="tableQuery.total>0" :total="tableQuery.total" :page.sync="tableQuery.page" :limit.sync="tableQuery.limit" @pagination="getTableData"/>
      </el-card>
    </el-row>

    <el-dialog v-el-drag-dialog title="商品详情" :visible.sync="openDetailFormDialog" fullscreen :append-to-body="true">
      <sku-detail ref="sku_detail_dialog" />
    </el-dialog>

    <sku-image-dialog v-if="openUploadFormDialog" ref="sku_image_dialog" />
    <sku-price-dialog v-if="openPriceFormDialog" ref="sku_price_dialog" @confirmForm="handleFilter" />
    <member-bounds-dialog v-if="openBoundsFormDialog" ref="bounds_form_dialog" />
    <ware-sku-dialog v-if="openWareSkuDialog" ref="ware_sku_dialog" />
  </div>
</template>

<script>
import { brandList } from '@/api/mall/product/brand'
import { categoryTreeData } from '@/api/mall/product/category'
import { skuTable } from '@/api/mall/product/sku'
import SkuDetail from './detail'
import SkuImageDialog from './upload/dialog'
import SkuPriceDialog from './price/dialog'
import MemberBoundsDialog from '@/views/system/member/bounds/form/dialog'
import WareSkuDialog from '@/views/mall/ware/sku/dialog'

export default {
  components: {
    SkuDetail,
    SkuImageDialog,
    SkuPriceDialog,
    MemberBoundsDialog,
    WareSkuDialog
  },
  data() {
    return {
      brandData: [],
      categoryProps: {
        value: 'id',
        label: 'name'
      },
      categoryData: [],
      catalogPath: [],
      showSearch: true,
      queryData: {
        Q_catalogId_L_EQ: undefined,
        Q_brandId_L_EQ: undefined,
        Q_key_S_LK: undefined,
        Q_price_L_GE: undefined,
        Q_price_L_LE: undefined
      },
      tableData: [],
      tableLoading: false,
      tableQuery: {
        page: 1,
        limit: 20,
        total: 0,
        sort: undefined,
        order: undefined
      },
      openDetailFormDialog: false,
      openUploadFormDialog: false,
      openPriceFormDialog: false,
      openBoundsFormDialog: false,
      openWareSkuDialog: false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      await this.getBrandData()
      await this.getCategoryData()
      this.getTableData()
    },
    getBrandData() {
      brandList().then(response => {
        this.brandData = response
      })
    },
    getCategoryData() {
      categoryTreeData({
        from: 'vue',
        excludeRoot: 'true'
      }).then(response => {
        this.categoryData = response
      }).catch(() => {})
    },
    handleChangeCatalog(value) {
      this.queryData.Q_catalogId_L_EQ = value[value.length - 1]
    },
    getImageSrc(value) {
      return this.$api.getImageSrc(value)
    },
    handleFilter() {
      this.tableQuery.page = 1
      this.getTableData()
    },
    handleClear() {
      this.$refs.queryForm.resetFields()
      this.getTableData()
    },
    getTableData() {
      const query = Object.assign(this.tableQuery, this.queryData)
      this.tableLoading = true
      skuTable(query).then(response => {
        this.tableData = response.param.data
        this.tableQuery.total = response.param.recordsTotal
        this.tableLoading = false
        this.$refs.sku_table.bodyWrapper.scrollTop = 0
      }).catch(e => {
        this.tableLoading = false
      })
    },
    sortChange(data) {
      const {prop, order} = data
      this.tableQuery.sort = prop
      if (order === 'ascending') {
        this.tableQuery.order = 'asc'
      } else {
        this.tableQuery.order = 'desc'
      }
      this.getTableData()
    },
    handlePreview(row) {
      this.openDetailFormDialog = true
      this.$nextTick(() => {
        this.$refs.sku_detail_dialog.init(row.spuId, row.skuId)
      })
    },
    handleUpload(row) {
      this.openUploadFormDialog = true
      this.$nextTick(() => {
        this.$refs.sku_image_dialog.init(row.skuId)
      })
    },
    handlePrice(row) {
      this.openPriceFormDialog = true
      this.$nextTick(() => {
        this.$refs.sku_price_dialog.init(row.skuId)
      })
    },
    handleBounds(row) {
      this.openBoundsFormDialog = true
      this.$nextTick(() => {
        this.$refs.bounds_form_dialog.init(undefined, row.skuId, row.skuName, 'mall')
      })
    },
    handleStock(row) {
      this.openWareSkuDialog = true
      this.$nextTick(() => {
        this.$refs.ware_sku_dialog.init(row.skuId)
      })
    }
  }
}
</script>
